<!-- 创建项目页面 -->
<template>
	<view class="page_all">
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_left" @click="leftClick()"><image src="../../static/all/back_white.png" style="width:50rpx;height:50rpx;"></image></view>
				<view class="page_title_line_middle">用车申请</view>
				<view class="page_title_line_left"></view>
			</view>
		</view>
		<view class="page_contentArea" style="background-color:#F7F7F7;">
			<!--行程输入块-->
			<view class="input_box"> 
				<view class="input_box_title">
					<view class="input_box_title_L">
						<image src="../../static/all/c_xingcheng.png" style="width:45rpx;height:45rpx;"></image>
						<span style="padding: 10rpx;"></span>行程
					</view>
					<view class="input_box_title_R"></view>
				</view>
				<view class="input_label">起始位置*</view>
				<view class="input_line1" @click="show_pos_s=true;hideKeyboard()"><!--注意：输入框的边框颜色自定义样式，必须用:styles (加s)-->
					<uni-easyinput v-model="form.startPosShow" :styles="styles" :placeholderStyle="placeholderStyle" disabled
					               placeholder="请选择起始位置" suffixIcon="bottom">
					</uni-easyinput>
				</view>
				
				<view class="input_label">归还位置*</view>
				<view class="input_line1" @click="show_pos_e=true;hideKeyboard()"><!--注意：输入框的边框颜色自定义样式，必须用:styles (加s)-->
					<uni-easyinput v-model="form.endPosShow" :styles="styles" :placeholderStyle="placeholderStyle" disabled
					               placeholder="请选择归还位置" suffixIcon="bottom">
					</uni-easyinput>
				</view>
				<view class="space_35"></view>
			</view>
			<!--用途输入块-->
			<view class="input_box">
				<view class="input_box_title">
					<view class="input_box_title_L">
						<image src="../../static/all/c_yongtu.png" style="width:45rpx;height:45rpx;"></image>
						<span style="padding: 10rpx;"></span>用途*
					</view>
					<view class="input_box_title_R"></view>
				</view>
				<view class="input_textarea"> <!--注意：输入框的边框颜色自定义样式，必须用:styles (加s)-->
					<uni-easyinput type="textarea" v-model="form.remark" :styles="styles" :placeholderStyle="placeholderStyle"
					               placeholder="请输入用途"></uni-easyinput>
				</view>
				<view class="space_35"></view>
			</view>
			<!--预计使用时间输入块-->
			<view class="input_box">
				<view class="input_box_title">
					<view class="input_box_title_L">
						<image src="../../static/all/c_shijian.png" style="width:45rpx;height:45rpx;"></image>
						<span style="padding: 10rpx;"></span>预计使用时间*
					</view>
					<view class="input_box_title_R"></view>
				</view>
				<view class="input_line1"> <!--注意：日期控件的边框已经通过修改原代码与其他的同颜色-->
					<uni-datetime-picker type="datetime" v-model="form.startDate" placeholder="开始时间" 
					                     :placeholderStyle="placeholderStyle" :start="today"/>
				</view>
				<view class="input_line1" style="margin-top:20rpx;">
					<uni-datetime-picker type="datetime" v-model="form.endDate" placeholder="结束时间" 
					                     :placeholderStyle="placeholderStyle" :start="today"/>
				</view>
				<view class="space_35"></view>
			</view>
			<!--选车块-->
			<view class="input_box">
				<view class="input_box_title">
					<view class="input_box_title_L">
						<image src="../../static/all/c_xuanche .png" style="width:45rpx;height:45rpx;"></image>
						<span style="padding: 10rpx;"></span>选车*
					</view>
					<view class="input_box_title_R">
						<image src="../../static/list/del_red.png" style="width:45rpx;height:45rpx;" v-if="form.carId!=''" @click="delCar()"></image>
						<span style="padding:10rpx;"></span>
						<image src="../../static/list/add.png" style="width:45rpx;height:45rpx;" @click="gotoPage('A')"></image>
					</view>
				</view>
				<view class="car_info" v-if="form.carId!=''">	
					<view class="car_info_img">
						<image :src="car_select.pic" style="width:300rpx;height:200rpx;border-radius:10rpx;"></image>
					</view>
					<view class="car_info_right">
						<view class="car_info_right_line"><span style="padding:10rpx;"></span>品牌：{{car_select.model}}</view>
						<view class="car_info_right_line"><span style="padding:10rpx;"></span>车牌号：{{car_select.license}}</view>
						<view class="car_info_right_line"><span style="padding:10rpx;"></span>换挡方式：{{car_select.transType}}</view>
						<view class="car_info_right_line"><span style="padding:10rpx;"></span>座位数：{{car_select.siteCount}}座</view>
					</view>
				</view>
				<view class="space_25"></view>
			</view>
			<!--选审批人块-->
			<view class="input_box"> 
				<view class="input_box_title">
					<view class="input_box_title_L">
						<image src="../../static/all/c_xuanren.png" style="width:45rpx;height:45rpx;"></image>
						<span style="padding: 10rpx;"></span>选择部门审批人
					</view>
					<view class="input_box_title_R"></view>
				</view>
				<view class="space_15"></view>
				<view class="input_line_radio">
					<u-radio-group v-model="form.appointIds" placement="column"> <!--注意：:name="item.login_id"代表取值-->
						<!-- <u-radio :customStyle="{marginLeft:'30px'}" v-for="(item, index) in radio_xuanren" 
						         :key="index" :label="item.fullname" :name="item.login_id" iconSize="16px" labelSize="16px"></u-radio> --> 
						<u-radio :customStyle="{marginLeft:'30px',marginBottom:'20px'}" v-for="(item, index) in radio_xuanren"
						         :key="index" :label="item.fullname" :name="item.login_id" size="26" labelSize="16px"></u-radio>
					</u-radio-group>
				</view>
				<view class="space_25"></view>
			</view>
			<view class="space_80"></view>
			<!--提交按钮行-->
			<view v-if="btn==1" class="form_btn" @click="form_submit()">提<span style="padding:30rpx;"></span>交</view>
			<view v-if="btn==0" class="form_btn btn_notClick">提交中……</view>
			<view class="space_80"></view>
		</view>
		
		<!--以下是起始归还位置用到的picker-->
		<u-picker :show="show_pos_s" :columns="[posList]"
							@cancel="posCancel_s" @confirm="posConfirm_s"
							title="起始位置" keyName="dictLabel">
		</u-picker>
		<u-picker :show="show_pos_e" :columns="[posList]"
							@cancel="posCancel_e" @confirm="posConfirm_e"
							title="归还位置" keyName="dictLabel">
		</u-picker>
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				/*******************以下是通用变量（控件样式、日期时间等定义）******************/
				today:"", //保存当前"yyyy-MM-dd"格式的日期
				//控件的样式
				placeholderStyle: "color:#A9A9A9;font-size:30rpx", 
				styles: {
					disableColor: '#FFF',
					borderColor: '#87CEFA', //文本框边框颜色
				},
				/*******************以上是通用变量（控件样式、日期时间等定义）******************/
				
				/************************以下是创建用车申请单相关变量**************************/
				//表单
				form: {
					startPos:"", //起始位置
					startPosShow:"", //起始位置中文显示
					endPos:"", //归还位置
					endPosShow:"", //归还位置中文显示
					startDate: '', //开始时间
					endDate: '', //结束时间
					remark: '', //用车事由
					carId: "", //选中的车辆
					
					locId:"", //用车部门（当前发起申请用户所在的部门）
					appointIds:'', //选部门审批人（当前发起申请用户所在的部门的审核人）
				},
				//选择的车辆
				car_select: null, 
				//起始与归还位置选择器
				show_pos_s: false,//用于控制起始位置选择器
				show_pos_e: false,//用于控制归还位置选择器
				posList: [], //位置字典
				radio_xuanren: [],//审核人选择
				
				/************************以上是创建用车申请单相关变量**************************/
				//防重复提交
				btn: 1, //0：不可用  1：可用（默认可用）
				
				//在此之上补充变量
			}
		},
		watch: {
			/*********************以下是监听创建创建用车申请单相关变量*********************/
			/*********************以上是监听创建创建用车申请单相关变量*********************/
		},
		onLoad() {
			// console.log("执行了onLoad方法");
			this.today=utils.dateFormat("small");
			/********************以下是创建用车申请单相关初始化方法***********************/
			getApp().globalData.car_select=null; //新建用车申请单时，全局变量初始化
			this.form.locId=getApp().globalData.login.loc_id;
			
			this.getLoginList(); //取部门审核人
			
			this.getPositionDict(); //获取位置下拉
			/********************以上是创建用车申请单相关初始化方法***********************/
		},
		onShow() {
			console.log("执行了onShow方法");
			/******************以下是选择车辆页面根据全局变量回显处理方法********************/
			//可以利用onShow方法每次显示都会执行一次的特性，进行变量的交互
			//加载全局变量
			this.car_select=getApp().globalData.car_select;
			console.log("创建用车申请单主页面中取到的全局car_select==",getApp().globalData.car_select);
			if(this.car_select!=null){ //提交按钮置灰判断，form.deptIds最终提交值在提交方法中获取
				this.form.carId=this.car_select.carId;
			}
			/******************以上是选择车辆页面根据全局变量回显处理方法********************/
		},
		methods: {
			/******************************以下是通用方法*********************************/
			//顶部导航回退箭头点击触发
			leftClick(){
				utils.pageBack();
			},
			//隐藏系统键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			gotoPage(flag){ //跳转到选车页面
				var that=this;
				if(flag=="A"){
					//先判断开始时间与截止时间是否为空
					if(that.form.startDate=="" || that.form.endDate==""){ 
						uni.showModal({
							title: '提示',
							content: '选车前请先输入用车时间段！',
							showCancel:false,
							success: function (res) {
								if(res.confirm){} 
							}
						}); //uni.showModal结束
						return;
					}
					if(that.form.startDate!="" && that.form.endDate!=""){
						var d1=new Date(that.form.startDate);
						var d2=new Date(that.form.endDate);
						if(d1>d2){
							uni.showModal({
								title: '提示',
								content: '归还时间不能在开始时间之前！',
								showCancel:false,
								success: function (res) {
									if(res.confirm){} 
								}
							}); //uni.showModal结束
							return;
						}
					}
					//有数据的情况下才进行跳转到选车页面
					uni.navigateTo({
						url:"/page_car/car/car_select?startDate="+that.form.startDate+"&endDate="+that.form.endDate,
					})
				}
			},
			/******************************以上是通用方法**********************************/
			
			/***********************以下是创建用车申请单相关方法****************************/
			//位置字典下拉（picker方式）
			getPositionDict(){ 
				let that=this;
				that.posList=[
					{
						dictLabel:"市政总院",
						dictValue:"市政总院",
					},
					{
						dictLabel:"东院（营口道院）",
						dictValue:"东院（营口道院）",
					},
				];
			},
			posConfirm_s(e) { //起始位置确定按钮
				console.log('起始位置下拉', e);
				this.form.startPos=e.value[0].dictValue;
				this.form.startPosShow=e.value[0].dictLabel;
				this.show_pos_s = false;
			},
			posCancel_s() { //起始位置取消按钮
				console.log('起始位置下拉取消按钮');
				this.show_pos_s = false;
			},
			posConfirm_e(e) { //归还位置确定按钮
				console.log('归还位置下拉', e);
				this.form.endPos=e.value[0].dictValue;
				this.form.endPosShow=e.value[0].dictLabel;
				this.show_pos_e = false;
			},
			posCancel_e() { //归还位置取消按钮
				console.log('归还位置下拉取消按钮');
				this.show_pos_e = false;
			},
			
			//取部门审核人
			getLoginList(){
				var that=this;
				var locId='{"taskLocId"='+this.form.locId+'}';
				console.log("转换后的locId==",locId);
				//{"loc_id"=30}
				var obj={
					"pri_code":"locApproveEvent",
					"cls_name":"com.vcard.car.pojo.AccessEventDTO",
					"cls_json":locId,
				};
				utils.getLoginList(obj).then(res => {
					console.log('取部门审核人返回值==',res); 
					if(res.data.status=="success"){
						var tArray=res.data.rows; 
						//过滤掉超级管理员
						for(var i=0;i<tArray.length;i++){
							if(tArray[i].fullname!="超级管理员"){
								that.radio_xuanren.push(tArray[i]);
							}
						}
						console.log("过滤掉超级管理员后的部门审核人集合==",that.radio_xuanren);
					}
					if(res.data.status=="error"){
						let msg=res.data.message;
						uni.navigateTo({
							url:'/pages/error/error?errorMsg='+msg 
						}) 
					}
				}).catch(error => {
					uni.navigateTo({
						url:'/pages/error/error?errorMsg='+error
					})
				})
			},
			//创建用车申请单提交
			form_submit(){
				var that=this;
				//1：校验空
				if(that.form.startPos==""){ //起始位置
					uni.showModal({
						title: '提示',
						content: '请选择起始位置！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				if(that.form.endPos==""){ //归还位置
					uni.showModal({
						title: '提示',
						content: '请选择归还位置！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				if(that.form.remark==""){ //用途
					uni.showModal({
						title: '提示',
						content: '请填写用车事由！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				if(that.form.startDate==""){ //开始时间
					uni.showModal({
						title: '提示',
						content: '请选择开始时间！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				if(that.form.endDate==""){ //归还时间
					uni.showModal({
						title: '提示',
						content: '请选择归还时间！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				if(that.form.startDate!="" && that.form.endDate!=""){
					var d1=new Date(that.form.startDate);
					var d2=new Date(that.form.endDate);
					if(d1>d2){
						uni.showModal({
							title: '提示',
							content: '归还时间不能在开始时间之前！',
							showCancel:false,
							success: function (res) {
								if(res.confirm){} 
							}
						}); //uni.showModal结束
						return;
					}
				}
				if(that.form.carId==""){ //选车
					uni.showModal({
						title: '提示',
						content: '请选择车辆！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				if(that.form.xuanren==""){ //选部门审批人
					uni.showModal({
						title: '提示',
						content: '请选择部门审批人！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				//2：补充的处理时间（只有日期）
				//3：补充的时间非必填项时，验证时间的有效性
				console.log("提交前的form==",that.form);
				uni.showModal({
						title: '提示',
						content: '确定提交用车申请单吗？',
						success: function(res) {
							if (res.confirm) {
								that.btn=0; //按钮置为不可用
								utils.addAccessTask(that.form).then(res => {
									console.log('创建申请单接口的返回值==',res); 
									that.btn=1; //无论成功与否按钮均置为可用
									if(res.data.status=="success"){
										getApp().globalData.query_flag=1; //需要刷新首页面的统计数字
										uni.showToast({
											title:'用车申请成功!',
											icon: 'success',
											duration: 2000,
										});
										setTimeout(() => {
											utils.pageBack();
										}, 2000); //显示toast 2秒钟之后执行
									}
									if(res.data.status=="error"){
										let msg=res.data.message;
										uni.navigateTo({
											url:'/pages/error/error?errorMsg='+msg 
										}) 
									}
								}).catch(error => {
									uni.navigateTo({
										url:'/pages/error/error?errorMsg='+error
									})
								})
							} 
							else {
								//执行取消后的操作
							}
						}
					})
					//uni.showModal结束
			},
			
			//清除掉选中的车
			delCar() {
				let that=this;
				uni.showModal({
					title: '提示',
					content: '确定要删除这个车吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.car_select=null;
							that.form.carId="";
							getApp().globalData.car_select=null;
						}
					}
				})
			},
			/***********************以上是创建用车申请单相关方法****************************/
			
			/*********************在此之上补充方法**********************/
		},
	}
</script>
<style lang="scss">
@import '../../common/css/page.css'; 
@import '../../common/css/b_form.css';
</style>